<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        #triangle-up {
            display: none;
            margin: 300px;
            width: 200px;
            height: 400px;
            border-top: 20px solid black;
            position: relative;
        }
        #triangle-up:after {
            content: "";
            width: 0px;
            height: 0px;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 50px solid white;
            position: absolute;
            top: -50px;
            left: 75px;
        }
        #triangle-up:before {
            content: "";
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid black;
            position: absolute;
            left: 50px;
            top: -100px;
        }
    </style>
    <script src="js/libs/jquery.js"></script>
</head>
<body>
    <button id="btn">Click Me</button>
    <div id="triangle-up">
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#btn").click(function () {
                var div = $("#triangle-up");
                if (div.css("display") == "none") {
                    div.css("display", "block");
                } else {
                    div.css("display", "none");
                }
            });
        });
        
    </script>
</body>
</html>
